<template>
	<view class="u-page">
		<view class="u-demo-block__content">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :labelStyle="labelStyle" :model="model1" ref="form1">
				<u-form-item labelWidth="100" label="站点名称:" prop="name" ref="item1">
					<u--input v-model="model1.name" border="bottom" placeholder="填写站点名称"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="经度:" prop="lon" ref="item1">
					<u--input v-model="model1.lon" type="digit" border="bottom" placeholder="填写经度"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="纬度:" prop="lat" ref="item1">
					<u--input v-model="model1.lat" type="digit" border="bottom" placeholder="填写纬度"></u--input>
				</u-form-item>
				<u-form-item>
					<u-button shape="circle" text="点击获取经纬度" type="success" @click="latlonFn"></u-button>
				</u-form-item>
				<u-form-item labelWidth="100" label="选择项目:" prop="group" ref="item1">
					<view class="u-page__checkbox-item">
						<u-checkbox-group v-model="model1.group" @change="checkboxChange" :borderBottom="true"
							placement="column" iconPlacement="right">
							<u-checkbox labelColor="#72757c" activeColor="#26ca62" :customStyle="{marginBottom: '16px'}"
								v-for="(item, index) in measurementArr" :key="index" :label="item.name" :name="item.id">
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</u-form-item>
				<u-form-item labelWidth="100" label="断面信息:" prop="stationProfileIdArr" ref="item1">
					<view class="u-page__checkbox-item">
						<u-radio-group v-model="model1.stationProfileIdArr" @change="stationProfileIdArrChange"
							:borderBottom="true" placement="column" iconPlacement="right">
							<u-radio labelColor="#72757c" activeColor="#26ca62" :customStyle="{marginBottom: '16px'}"
								v-for="(item, index) in stationProArr" :key="index" :label="item.name" :name="item.id">
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
			</u--form>
			<u-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelStyle: {
					color: '#4d4d4d',
					fontSize: '40rpx',
				},
				model1: {
					name: '',
					lon: null,
					lat: null,
					group: [],
					stationProfileIdArr: '',
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写测站名称',
						trigger: ['blur', 'change']
					},
					lon: {
						type: 'number',
						required: true,
						message: '请填写经度',
						trigger: ['blur', 'change']
					},
					lat: {
						type: 'number',
						required: true,
						message: '请填写纬度',
						trigger: ['blur', 'change']
					},
					group: {
						type: 'array',
						min: 1,
						required: true,
						message: '至少选1项',
						trigger: ['change']
					}
				},
				measurementArr: [],
				stationProArr: [],
				userId: '',
				groupStr: '',
				stationProfileIdArrStr: ''
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		onLoad() {
			this.measurementFn()
			this.stationProfileFn()
			let obj = this.vuex_user
			this.userId = obj.userId
		},
		onShow() {

		},
		methods: {
			// 绑定站点
			bindProjectFn() {
				uni.$u.http.post('/device/survey_station/add', {
					"surveyStationName": this.model1.name,
					"userId": this.userId * 1,
					"typeArr": this.groupStr,
					"stationProfileIdArr": this.stationProfileIdArrStr,
					"lon": this.model1.lon * 1,
					"lat": this.model1.lat * 1,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							duration: 500
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 600)
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 获取项目列表
			measurementFn() {
				uni.$u.http.get('/device/measurement_item/list').then(res => {
					if (res.code == 200) {
						this.measurementArr = res.rows.map((i) => {
							return {
								id: i.id,
								name: i.measurementName
							}
						})
					}
				}).catch(err => {
					console.log('错误--', err);
				})
			},
			// 获取断面信息
			stationProfileFn() {
				uni.$u.http.get('/device/stationProfile/list').then(res => {
					console.log('5555', res);
					if (res.code == 200) {
						this.stationProArr = res.rows.map((i) => {
							return {
								id: i.id,
								name: i.name,
								disabled: false
							}
						})
					}
				}).catch(err => {
					console.log('错误--', err);
				})
			},
			// 多选
			checkboxChange(e) {
				let str = e.join(',')
				this.groupStr = str
			},
			// 单选
			stationProfileIdArrChange(e) {
				let str = e + ''
				this.stationProfileIdArrStr = str
			},
			// 获取经纬度
			latlonFn() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.model1.lon = res.longitude
						this.model1.lat = res.latitude
					}
				});
			},
			// 提交
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					// uni.$u.toast('校验通过')
					this.bindProjectFn()

				}).catch(errors => {
					uni.$u.toast('填写数据错误')
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-demo-block__content {
		padding: 30rpx;
	}

	.u-page__checkbox-item {
		width: 400rpx;
		padding: 20rpx 30rpx 0 30rpx;
		border-radius: 30rpx;
		background-color: #fbfbfc;
		border: 3rpx solid #ffffff;
		box-shadow: 0rpx 0rpx 15rpx rgba(0, 0, 0, 0.2);
	}
</style>